/* ---- 公共样式变量 ---- */

/* 主题色 */
$theme-color: #f17700;
$theme-color-light: #fc9e39;
$theme-color-dark: #cc5b02;
$theme-color-bg: #fff5ea;

/* 字体大小 */
$font-size-small: 24rpx;
$font-size-base: 28rpx;
$font-size-large: 36rpx;

/* 除去页内边距的最大宽度 */
$container-padding-width: 25rpx;
$container-padding-height: 20rpx;
$max-width: 750rpx - $container-padding-width * 2;

/*  
 * @Author: 廖耀华
 * @Descrtion: 原子CSS
 */
/* 定义一个映射，包含想要生成的所有值 */
$spacing-values: (
  "0": 0,
  "5": 5,
  "10": 10,
  "15": 15,
  "20": 20,
  "25": 25,
  "30": 30,
  "40": 40,
  "50": 50,
  "60": 60,
);

/* 为padding和margin生成原子类 
 * 例如 mr-5 => margin-right: 5rpx; pt-10 => padding-top: 10rpx;
 */
/* 单方向 */
@each $property, $abbrev in (padding: "p", margin: "m") {
  @each $direction, $dirabbrev in (top: "t", right: "r", bottom: "b", left: "l")
  {
    @each $class, $value in $spacing-values {
      .#{$abbrev}#{$dirabbrev}-#{$class} {
        #{$property}-#{$direction}: #{$value}rpx;
      }
    }
  }
}

// 四个方向
@each $property, $abbrev in (padding: "p", margin: "m") {
  @each $class, $value in $spacing-values {
    .#{$abbrev}-#{$class} {
      #{$property}: #{$value}px;
    }
  }
}

/* ---- 公共样式组 ---- */
.d-flex {
  display: flex;
}

/* 页面背景 */
// page {
// 	background: #f8f8f8;
// }

/* 页面公共样式 */
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $container-padding-height $container-padding-width;
  color: #333;
}

.app-title {
  font-size: $font-size-large;
  font-weight: bold;
  color: #333;
}

.app-more {
  font-size: $font-size-base;
  font-weight: normal;
  color: $theme-color;
}

.app-content {
  font-size: $font-size-base;
  margin: 20rpx 0;
  color: #666;
}

.app-avatar {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  border-radius: 100%;
}

.app-box {
  width: $max-width - 2 * 20rpx;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 20rpx;
  margin: 20rpx 0;
  box-shadow: 0 3rpx 9rpx #eee;
}

html, body {
  // 隐藏所有滚动条
  ::-webkit-scrollbar {
    display: none;
  }
}
